<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
  <link rel="stylesheet" href="./lib/cmtlist.css">
</head>

<body>

  <!-- 栅格系统 -->
  <div class="container-fluid">
    <!-- 栅格系统中的一行 -->
    <div class="row">
      <!-- 左侧的表格，占了 8 列 -->
      <div class="col-sm-8">
        <!-- 评论列表 -->
        <ul class="list-unstyled">
          <li class="media shadow-sm">
            <img src="https://img01.yzcdn.cn/vant/sand.jpg" class="mr-3" alt="...">
            <div class="media-body">
              <p>评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~</p>
              <p class="mt-0 mb-1 cmt-info">
                <span>评论时间：xxx</span>
                <span class="username">评论人：xxx</span>
              </p>
            </div>
            <button type="button" class="close" aria-label="关闭">
              <span aria-hidden="true">&times;</span>
            </button>
          </li>
          <li class="media shadow-sm">
            <img src="https://img01.yzcdn.cn/vant/sand.jpg" class="mr-3" alt="...">
            <div class="media-body">
              <p>评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~</p>
              <p class="mt-0 mb-1 cmt-info">
                <span>评论时间：xxx</span>
                <span class="username">评论人：xxx</span>
              </p>
            </div>
            <button type="button" class="close" aria-label="关闭">
              <span aria-hidden="true">&times;</span>
            </button>
          </li>
          <li class="media shadow-sm">
            <img src="https://img01.yzcdn.cn/vant/sand.jpg" class="mr-3" alt="...">
            <div class="media-body">
              <p>评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~评论内容哦~</p>
              <p class="mt-0 mb-1 cmt-info">
                <span>评论时间：xxx</span>
                <span class="username">评论人：xxx</span>
              </p>
            </div>
            <button type="button" class="close" aria-label="关闭">
              <span aria-hidden="true">&times;</span>
            </button>
          </li>
        </ul>
      </div>

      <!-- 右侧的添加区域，占了 4 列 -->
      <div class="col-sm-4">
        <!-- 发表评论的卡片 -->
        <form class="card text-white bg-secondary sticky-top shadow-sm">
          <div class="card-header">发表评论</div>
          <div class="card-body bg-light">
            <!-- 评论人 -->
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">评论人</span>
              </div>
              <input type="text" class="form-control" placeholder="请输入评论人名称" name="username">
            </div>
            <!-- 评论内容 -->
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">评论内容</span>
              </div>
              <textarea type="text" class="form-control" placeholder="请输入评论内容（最多120字）" maxlength="120"
                name="content"></textarea>
            </div>
            <!-- 发表评论按钮 -->
            <button class="btn btn-dark" id="btnAdd">发表评论</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="./lib/jquery-v3.6.0.js"></script>
  <script>
    $(function () {
      console.log('ok')
    })
  </script>
</body>

</html>